<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.1.1.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        float: left;
        margin: 5px 0;
    }

    ul>li {
        list-style-type: none;
    }

    #aa>li,
    #cc>li {
        width: 48px;
        height: 26.5px;
        border: 1px solid gray;
        margin-top: -1px;
        background-color: white;
        text-align: center;
        line-height: 27px;
        background: url('./imgs/lili.jpg') repeat-x;
    }

    #bb {
        width: 200px;
        height: 251px;
        margin-top: 3px;
    }

    #bb>li {
        display: none;
    }

    #bb .ffffff {
        display: block;
    }

    .accc {
        background: url('./imgs/abg.gif') repeat-x !important;
    }
</style>

<body>
    <ul id="aa">
        <li>女靴</li>
        <li>雪地靴</li>
        <li>冬裙</li>
        <li>呢大衣</li>
        <li>毛衣</li>
        <li>棉被</li>
        <li>女裤</li>
        <li>羽绒服</li>
        <li>牛仔裤</li>
    </ul>
    <ul id="bb">
        <li class="ffffff"><img src="./imgs/男靴.jpg"></li>
        <li><img src="./imgs/雪地靴.jpg"></li>
        <li><img src="./imgs/冬裙.jpg"></li>
        <li><img src="./imgs/呢大衣.jpg"></li>
        <li><img src="./imgs/毛衣.jpg"></li>
        <li><img src="./imgs/毛衣.jpg"></li>
        <li><img src="./imgs/女裤.jpg"></li>
        <li><img src="./imgs/羽绒服.jpg"></li>
        <li><img src="./imgs/牛仔裤.jpg"></li>
        <li><img src="./imgs/女包.jpg"></li>
        <li><img src="./imgs/男包.jpg"></li>
        <li><img src="./imgs/登山鞋.jpg"></li>
        <li><img src="./imgs/皮带.jpg"></li>
        <li><img src="./imgs/围巾.jpg"></li>
        <li><img src="./imgs/皮衣.jpg"></li>
        <li><img src="./imgs/男毛衣.jpg"></li>
        <li><img src="./imgs/男棉服.jpg"></li>
        <li><img src="./imgs/男靴.jpg"></li>
    </ul>
    <ul id="cc">
        <li>女包</li>
        <li>男包</li>
        <li>登山鞋</li>
        <li>皮带</li>
        <li>围巾</li>
        <li>皮衣</li>
        <li>男毛衣</li>
        <li>男棉服</li>
        <li>男靴</li>
    </ul>
</body>
<script>
    $(document).ready(function () {
        $('#aa>li,#cc>li').mouseover(function () {
            $(this).addClass('accc').siblings('li').removeClass('accc')
            // console.log($('#aa>li,#cc>li').index($(this)))
            $('#bb>li').eq($('#aa>li,#cc>li').index($(this))).addClass('ffffff').siblings('li').removeClass('ffffff')
        })
        $('#aa>li,#cc>li').mouseout(function () {
            $(this).removeClass('accc')
        })

    })
</script>

</html>